<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: liangbing
  Date: 2018/4/27
  Time: 12:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="${pageContext.request.contextPath}/static/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
    <style type="text/css" media="all">
        * {
            padding: 0px;
            margin: 0px;
        }
        a {
            text-decoration: none;
        }
        ul {
            list-style: outside none none;
        }
        .slider, .slider-panel img, .slider-extra {
            width: 550px;
            height: 200px;
        }
        .slider {
            position: relative;
        }
        .slider-panel, .slider-nav, .slider-pre, .slider-next {
            position: absolute;
            z-index: 8;
        }
        .slider-panel {
            position: absolute;
        }
        .slider-panel img {
            border: none;
        }
        .slider-extra {
            position: relative;
        }
        .slider-nav {
            margin-left: -51px;
            position: absolute;
            left: 50%;
            bottom: 4px;
        }
        .slider-nav li {
            background: #3e3e3e;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            margin: 0 2px;
            overflow: hidden;
            text-align: center;
            display: inline-block;
            height: 18px;
            line-height: 18px;
            width: 18px;
        }
        .slider-nav .slider-item-selected {
            background: blue;
        }
        .slider-page a{
            background: rgba(0, 0, 0, 0.2);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
            color: #fff;
            text-align: center;
            display: block;
            font-family: "simsun";
            font-size: 22px;
            width: 28px;
            height: 62px;
            line-height: 62px;
            margin-top: -31px;
            position: absolute;
            top: 50%;
        }
        .slider-page a:HOVER {
            background: rgba(0, 0, 0, 0.4);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
        }
        .slider-next {
            left: 100%;
            margin-left: -28px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            var length,
                currentIndex = 0,
                interval,
                hasStarted = false, //是否已经开始轮播
                t = 3000; //轮播时间间隔
            length = $('.slider-panel').length;
            //将除了第一张图片隐藏
            $('.slider-panel:not(:first)').hide();
            //将第一个slider-item设为激活状态
            $('.slider-item:first').addClass('slider-item-selected');
            //隐藏向前、向后翻按钮
            $('.slider-page').hide();
            //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
            $('.slider-panel, .slider-pre, .slider-next').hover(function() {
                stop();
                $('.slider-page').show();
            }, function() {
                $('.slider-page').hide();
                start();
            });
            $('.slider-item').hover(function(e) {
                stop();
                var preIndex = $(".slider-item").filter(".slider-item-selected").index();
                currentIndex = $(this).index();
                play(preIndex, currentIndex);
            }, function() {
                start();
            });
            $('.slider-pre').unbind('click');
            $('.slider-pre').bind('click', function() {
                pre();
            });
            $('.slider-next').unbind('click');
            $('.slider-next').bind('click', function() {
                next();
            });
            /**
             * 向前翻页
             */
            function pre() {
                var preIndex = currentIndex;
                currentIndex = (--currentIndex + length) % length;
                play(preIndex, currentIndex);
            }
            /**
             * 向后翻页
             */
            function next() {
                var preIndex = currentIndex;
                currentIndex = ++currentIndex % length;
                play(preIndex, currentIndex);
            }
            /**
             * 从preIndex页翻到currentIndex页
             * preIndex 整数，翻页的起始页
             * currentIndex 整数，翻到的那页
             */
            function play(preIndex, currentIndex) {
                $('.slider-panel').eq(preIndex).fadeOut(500)
                    .parent().children().eq(currentIndex).fadeIn(1000);
                $('.slider-item').removeClass('slider-item-selected');
                $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
            }
            /**
             * 开始轮播
             */
            function start() {
                if(!hasStarted) {
                    hasStarted = true;
                    interval = setInterval(next, t);
                }
            }
            /**
             * 停止轮播
             */
            function stop() {
                clearInterval(interval);
                hasStarted = false;
            }
            //开始轮播
            start();
        });
    </script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" title="logoTitle" href="#">简易新闻</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li role="presentation">
                    <c:if test="${user.name!= null}">
                        <a href="#">当前用户：<span class="badge">${user.name}</span></a>
                    </c:if>
                    <c:if test="${user.name== null}">
                        <a href="/view/login.jsp">登陆</a>
                        <a href="/view/register.jsp">注册</a>
                    </c:if>
                </li>
                <c:if test="${user.name!= null}">
                    <li>
                        <a href="/user/logout">
                            <span class="glyphicon glyphicon-lock"></span>退出登录
                        </a>
                    </li>
                </c:if>
            </ul>
        </div>
    </div>
</nav>
<div align="center">
<table align="center" width="90%">
    <tr>
        <td colspan="2">
            <%--<table align="center" width="100%">--%>
                <%--<tr>--%>
                    <%--<c:forEach var="newsCategory" items="${newsCategoryList}">--%>
                        <%--<td><a href="#">${newsCategory.title}</a>&emsp;&emsp;&emsp;</td>--%>
                    <%--</c:forEach>--%>
                <%--</tr>--%>
            <%--</table>--%>
            <div>
                <c:forEach var="newsCategory" items="${newsCategoryList}">
                    <span style="margin: 2px 0; padding: 0 5px; background-color: #faebcc;">
                        <a href="#">${newsCategory.title}</a>
                    </span>
                </c:forEach>
            </div>
        </td>
    </tr>

    <tr>
        <td colspan="2">
            <br>
            <img src="../static/homePage/images/head.png" width="100%" border="1px">
        </td>
    </tr>

    <tr>
        <td style="width: 600px">
            <div class="slider">
                <ul class="slider-main">
                    <li class="slider-panel">
                        <a href="#" target="_blank"><img src="../static/homePage/images/18.jpg"></a>
                    </li>
                    <li class="slider-panel">
                        <a href="#" target="_blank"><img src="../static/homePage/images/19.jpg"></a>
                    </li>
                    <li class="slider-panel">
                        <a href="#" target="_blank"><img src="../static/homePage/images/20.jpg"></a>
                    </li>
                    <li class="slider-panel">
                        <a href="#" target="_blank"><img src="../static/homePage/images/21.jpg"></a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
           <ul>
               <li><div style="font-size: 25px;">周杰伦 1979年1月18日 台湾省新北市 中国</div></li><br>
               <li ><div style="font-size: 20px;width: 300px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;">
                   2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格200
                   0年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]
                   。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物
                   2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格
               </div></li><br>
            </ul>
        </td>
    </tr>
    <c:forEach var="newsInfo" items="${newsInfoList}">
    <tr>
        <td style="width: 700px">
            <br><br><img src="/user/image/${newsInfo.image}" style="width: 620px; height: 200px;" >
        </td>
        <%--<td align="center">--%>
        <td>
            <ul>

                <li><div style="font-size: 25px;"><a href="/newsInfo/getNewsInfoDetail?newsId=${newsInfo.newsId}">${newsInfo.title}</a></div></li><br>
                <li ><div style="font-size: 20px;width: 300px;;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                        ${newsInfo.content}
                </div></li><br>
            </ul>
        </td>
    </tr>
    </c:forEach>




</table>
    <br>
    <br>
</div>
<hr>
<div style="padding: 0px;margin: 10px 600px">
    <h6>版权所有 请勿侵权</h6>
</div>
<hr>
</body>
</html>
